<template>
    <div class="main-box-right">
        <el-dialog
        :title="operateType"
        :visible.sync="isShow"
        >
              <common-form
              :formLabel="operateFormlabel"
              :form="operateForm"
              :inline="true"
              ref="form"
              ></common-form>
             <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="isShow = false">取消</el-button>
                <el-button size="medium" type="primary" @click="confirm">确定</el-button>
              </div>
              </el-dialog>
              <template v-if="shopinfo.length!==0">
               <div class="main-box-right-top" v-for="val in shopinfo" :key="val.shopId">
                    <h2>店铺名称: {{val.shopName}}</h2>
                    <p>商铺信息</p>
                    <div class="main-box-right-part">
                        <p>店铺名称</p>
                        <span>{{val.shopName}}</span>
                        <button @click="editName(val)">修改</button>
                    </div>
                    <div class="main-box-right-part">
                        <p>联系电话</p>
                        <span>{{val.shopPhone}}</span>
                        <button  @click="editPhone(val)">修改</button>
                    </div>
                    <div class="main-box-right-part">
                        <p>店铺标签</p>
                        <span>{{val.shopTag}}</span>
                        <button @click="editTag(val)">修改</button>
                    </div>
                     <div class="main-box-right-part">
                        <p>地址</p>
                        <span>{{val.shopLocation}}</span>
                        <button @click="editLocation(val)">修改</button>
                    </div>
                     <div class="main-box-right-part">
                        <p>范围</p>
                        <span>{{val.shopRange}}</span>
                        <button @click="editRange(val)">修改</button>
                    </div>
                </div>
              </template>
              <template v-if="shopinfo.length===0">
                  <p class="nodata">暂无信息</p>
              </template>
    </div>
</template>

<script>
import {updateshop,getshopByid} from '../../../api/personalData/shop/index'
import jwtDecode from 'jwt-decode'
import cookie from '../../cookie/index'
import CommonForm from '@/components/ly/Common/CommonForm'
export default {
    name:'ShopInformation',
    components:{CommonForm},
    data() {
      return {
        title:'',
        formname:'',
        isShow:false,
        operateType:'add',
        operateFormlabel:[],
        operateForm:{
          shopId:'',
          shopLocation:'',
          shopName:'',
          shopPhone:'',
          shopRange:'',
          shopTag:''
        },
        shopinfo:{}
      }
    },
    mounted(){
      const path = this.$route.path
      if(path === '/shoppersonal/information'){
        this.title='店铺信息'
      }else{
        this.title='个人信息'
      }
    },
    methods:{
      confirm(){
        updateshop(this.operateForm).then(data=>{
          this.isShow = false
              this.$message({
                    type: "success",
                    message: "修改成功!"
                })
                this.getShopinfo() 
                console.log(data);
        })
      },
      // 修改名称
      editName(val){
          this.operateType = '修改店铺名称'
          this.isShow = true
          this.operateFormlabel=[
               {
                model:'shopName',
                label:'店铺名称',
                type:'input',
                display:''
              }
          ]
          this.operateForm={
              shopId:val.shopId,
              shopLocation:val.shopLocation,
              shopName:val.shopName,
              shopPhone:val.shopPhone,
              shopRange:val.shopRange,
              shopTag:val.shopTag,
              userId:val.userId
        }
      },
      // 修改联系电话
      editPhone(val){
      this.operateType = '修改联系电话'
          this.isShow = true
          this.operateFormlabel=[
               {
                model:'shopPhone',
                label:'店铺名称',
                type:'input',
                display:''
              }
          ]
          this.operateForm={
              shopId:val.shopId,
              shopLocation:val.shopLocation,
              shopName:val.shopName,
              shopPhone:val.shopPhone,
              shopRange:val.shopRange,
              shopTag:val.shopTag,
              userId:val.userId
        }
      },
       // 修改标签
      editTag(val){
      this.operateType = '修改标签'
          this.isShow = true
          this.operateFormlabel=[
               {
                model:'shopTag',
                label:'标签',
                type:'input',
                display:''
              }
          ]
          this.operateForm={
              shopId:val.shopId,
              shopLocation:val.shopLocation,
              shopName:val.shopName,
              shopPhone:val.shopPhone,
              shopRange:val.shopRange,
              shopTag:val.shopTag,
              userId:val.userId
        }
      },
       // 修改地址
      editLocation(val){
          this.operateType = '修改地址'
          this.isShow = true
          this.operateFormlabel=[
               {
                model:'shopLocation',
                label:'地址',
                type:'input',
                display:''
              }
          ]
          this.operateForm={
              shopId:val.shopId,
              shopLocation:val.shopLocation,
              shopName:val.shopName,
              shopPhone:val.shopPhone,
              shopRange:val.shopRange,
              shopTag:val.shopTag,
              userId:val.userId
        }
      },
        // 修改范围
      editRange(val){
      this.operateType = '修改范围'
          this.isShow = true
          this.operateFormlabel=[
               {
                model:'shopRange',
                label:'范围',
                type:'input',
                display:''
              }
          ]
          this.operateForm={
              shopId:val.shopId,
              shopLocation:val.shopLocation,
              shopName:val.shopName,
              shopPhone:val.shopPhone,
              shopRange:val.shopRange,
              shopTag:val.shopTag,
              userId:val.userId
        }
      },
       // 店铺信息
       getShopinfo(){
        const user = jwtDecode(cookie.getToken());
        getshopByid({userId:user.userId}).then(data=>{
            const list =data.data.data
            this.shopinfo = list
            console.log('@@',list);
        })
      }
    },
    created(){
      this.getShopinfo()
    }
}
</script>

<style lang="less" scoped>
@navcolor: rgb(58, 58, 58);
@navfont: 13px;
@width: 1200px;
@hovercolor: #76d4ff;
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
input {
  outline: none;
}
li {
  list-style: none;
}
  button {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 100px;
            font-size: 14px;
            color: #666666;
            height: 40px;
            width: 82px;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
          }
.nodata{
  text-align: center;
  height: 200px;
  line-height: 200px;
}          
.main-box-right {
      margin-left: 20px;
      float: left;
      width: 90%;
      border-radius: 4px;
      background-color: #ffffff;
      border: 1px solid #e5e5e5;
      margin-bottom: 10px;
      position: relative;
      .main-box-right-top {
        width: 100%;
        // height: 90px;
        h2 {
          margin-top: 10px;
          font-weight: 400;
          padding: 12px 30px;
          font-size: 20px;
        }
        p {
          font-size: 14px;
          padding-left: 32px;
          margin-bottom: 20px;
          color: #838383;
        }
        .main-box-right-part {
          width: 90%;
          height: 90px;
          margin: 0 auto;
          border-top: 1px solid #d6d6d6;
          position: relative;
          p {
            width: 103px;
            display: inline-block;
            text-align: right;
            line-height: 90px;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            &::after {
              content: "";
              height: 100%;
              padding-right: 30px;
              border-right: 2px solid #d6d6d6;
            }
          }
          span {
            margin-left: 30px;
            font-size: 12px;
            color: #666666;
            line-height: 40px;
          }
          .introduction{
            display: inline-block;
            max-width: 500px;
            // height: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          button {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 100px;
            font-size: 14px;
            color: #666666;
            float: right;
            height: 40px;
            width: 82px;
            cursor: pointer;
            margin-top: 20px;
            line-height: 40px;
            text-align: center;
          }
          .head-img {
            position: absolute;
            top: 20px;
            left: 170px;
            border-radius:50% ;
          }
        }
      }
    }
</style>